<script setup lang="ts">
import KSpace from "./KSpace.vue";

type Prop = {
  type?: "primary" | "success" | "warning" | "danger" | "info";
  title?: string;
  showIcon?: boolean;
};

const props = withDefaults(defineProps<Prop>(), {
  type: "info",
  text: "",
  showIcon: true
});
</script>

<template>
  <KSpace align="center">
    <el-icon v-if="showIcon" size="14">
      <InfoFilled v-if="type === 'info'" :class="`mention-${type}`" />
      <WarningFilled
        v-else-if="type === 'warning'"
        :class="`mention-${type}`"
      />
      <CircleCheckFilled
        v-else-if="type === 'success'"
        :class="`mention-${type}`"
      />
      <CircleCloseFilled
        v-else-if="type === 'danger'"
        :class="`mention-${type}`"
      />
    </el-icon>
    <span :class="['mention-text', `mention-${type}`]">{{ title }}</span>
  </KSpace>
</template>
<style lang="scss" scoped>
.mention-text {
  margin-left: 5px;
  font-size: var(--el-font-size-small);
}

.mention-primary {
  color: var(--el-color-primary);
}

.mention-success {
  color: var(--el-color-success);
}

.mention-warning {
  color: var(--el-color-warning);
}

.mention-danger {
  color: var(--el-color-danger);
}

.mention-info {
  color: var(--el-color-info);
}
</style>
